<template>
	<view class="container detail-container">
		<view style="margin-top: 20rpx;" class="news-title">{{data.title}}</view>
		<!-- 新闻信息 -->
		<view class="news-meta">
			<text class="time">发布时间：{{data.time}}</text>
			<text class="read-count">阅读：{{data.views}}次</text>
		</view>
		<rich-text class="content" :nodes="data.content" />
	</view>
</template>

<script setup>
	import { useFontSizeStore } from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();
	import {
		health_consultation_detailApi
	} from "@/api/health"
	import { onLoad } from '@dcloudio/uni-app';
import {
		reactive
	} from 'vue';


	const data = reactive({
		title: "",
		time: "2025-12-26",
		views: "29",
		content: ""
	})
	onLoad((options)=>{
		if(options.id){
			health_consultation_detailApi({
				id:options.id
			}).then((res)=>{
				if(res.code==200){
					console.log("res1",res)
					const content=showData(res.data.content);
						data.title=res.data.title;
						data.content=content;
				}
			})
		}
	})
	
	const showData=(val)=> {
	        const res = val
	            .replace(/style="[^"]*"/g, '')
	            .replace(/<img[^>]*>/g, function (match) {
	                // 移除 img 标签中的 style、width 和 height 属性
	                let cleanedImg = match
	                    .replace(/width="[^"]*"/g, '')
	                    .replace(/height="[^"]*"/g, '');
	                // 添加新的 style 属性
	                return cleanedImg.replace(/<img/, '<img style="width: 100%;height: auto;border-radius:8px"');
	            })
	            .replace(/<figure /g, '<div class="figure" ')
	            .replace(/<\/figure>/g, '</div>')
	            .replace(/<p>/g, '<p style="margin: 1em 0;">')
	            .replace(/<p\s+/g, '<p style="margin: 1em 0;" ')
	        ;
	        console.log(res, "ww:res");
	        return res
	    }
</script>

<style lang="less" scoped>
	.detail-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.news-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}

	.news-meta {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.news-banner {
		width: 100%;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.news-content {
		font-size: 30rpx;
		color: #555;
		line-height: 1.8;
	}

	.paragraph {
		margin-bottom: 30rpx;
		text-indent: 60rpx;
		/* 首行缩进 */
	}

	.content-img {
		width: 100%;
		margin: 30rpx 0;
		border-radius: 12rpx;
	}

	.related-news {
		margin-top: 50rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.related-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.related-item {
		font-size: 28rpx;
		color: #555;
		padding: 15rpx 0;
		border-bottom: 1rpx dashed #eee;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	//////@at-root
	/* 限制内容最大宽度并居中 */
	.detail-container {
		max-width: 100%;
		/* 微信小程序设计稿标准宽度 */
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 确保图片不超出容器宽度 */
	.news-banner,
	.content-img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* 修复可能导致溢出的其他元素 */
	.paragraph {
		word-break: break-all;
		/* 强制单词换行 */
		overflow-wrap: break-word;
	}

	page view,
	p,
	text {
		line-height: 50rpx !important;
	}
</style>